<template>
  <div class="table-container">
    <a-table class="ant-table-auto" :columns="columns" :data-source="data" :pagination="false">
      <template #day="text, record, index">
        <a-input
          v-if="!disabled"
          style="margin: -5px 0"
          :value="text"
          @change="(e) => handleChange(e.target.value, index, 'day')"
        />
        <span v-else>{{ text }}</span>
      </template>

      <template #ratio="text, record, index">
        <a-input
          v-if="!disabled"
          prefix="%"
          type="number"
          style="margin: -5px 0"
          :value="text"
          @change="(e) => handleChange(e.target.value, index, 'ratio')"
        />
        <span v-else>{{ text }}</span>
      </template>

      <template #operation="text, record, index">
        <div>
          <a
            :disabled="!(index === (data.length - 1))
              || data.length === 1
              || disabled"
            @click="deleteRow(text, record, index)"
          >删除</a>
        </div>
      </template>
      <!-- <template
        v-for="col in ['day', 'ratio']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.key)">Save</a>
            <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
          </span>
        </div>
      </template> -->
    </a-table>

    <a-button class="button" type="dashed" block @click="addRow" v-if="!disabled">
      +  添加
    </a-button>
  </div>
</template>
<script>
const columns = [
  {
    title: '期数',
    dataIndex: 'order',
    width: '25%',
    align: 'center',
  },
  {
    title: '距借款日间隔 /天',
    dataIndex: 'day',
    width: '15%',
    scopedSlots: { customRender: 'day' },
    align: 'center',
  },
  {
    title: '还款比例 %',
    dataIndex: 'ratio',
    width: '40%',
    scopedSlots: { customRender: 'ratio' },
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
]

export default {
  data () {
    return {
      // initData: []
    }
  },

  model: {
    prop: 'data',
    event: 'updated',
  },

  props: {
    data: {
      type: Array,
      default: () => [],
    },

    disabled: {
      type: Boolean,
      default: () => false,
    },
  },

  watch: {
    // data: {
    //   immediate: true,
    //   handler(value) {
    //     this.initData = value
    //       .map((item) => ({ ...item, ratio: item.ratio * 100  }))
    //   }
    // }
  },

  data () {
    return {
      columns,
      editingKey: '',
    }
  },

  methods: {
    // updated table
    updatedTable () {
      this.$emit('updated', this.data)
    },

    // 删除行
    deleteRow (text, record, index) {
      this.data.pop()

      this.updatedTable()
    },

    // 添加行
    addRow () {
      this.data.push({
        order: (this.data.length + 1),
        day: '',
        ratio: '',
      })

      this.updatedTable()
    },

    // 更改值
    handleChange (value, index, key) {
      this.data[index][key] = value.toString()

      this.updatedTable()
    },
  },
}
</script>

<style lang="scss" scoped>
.table-container {
  .button {
    margin-top: $margin-xs;
  }
}
</style>

<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

</style>
